<template>
  <section>
    <ft-table
      ref="table"
      :data="tableData"
      :columns="columns"
      :cell-style="{background: 'rgba(84, 92, 100, 0.25)'}"

    >
      <template #operation="{ row }" v-if="userInfo.is_admin==1">
        <i
          class="el-icon-edit-outline color-blue left-space"
          @click="showEditDialog(row)"
        ></i>
      </template>
    </ft-table>

    <el-drawer
      ref="drawer"
      :visible.sync="showDrawer"
      @open="beforeOpenDrawer"
      :with-header="false"
    >
      <h3>修改运维信息</h3>
      <el-form  label-width="100px" :rules="rules">

        <el-form-item label="公司名称">
          <el-input v-model="form.company"></el-input>
          
        </el-form-item>
        
        <el-form-item label="联系电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>

        <el-form-item label="联系地址">
          <el-input v-model="form.addr"></el-input>
        </el-form-item>
       <div class="form-button">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </el-form>
    </el-drawer>
  </section>
</template>
<script>
import { 
  getProductInfoApi,
  updateProductInfoApi
  } from '@/api/product-info.js' 

import {mapGetters} from 'vuex'

export default {
  name: 'product-info',
  data(){
    return {
      form:{
        company: '',
        addr: '',
        phone: '',
      },
      columns:[
        {prop: 'company', label: '公司名称', align: 'center'},
        {prop: 'phone', label: '联系电话', align: 'center'},
        {prop: 'addr', label: '联系地址', align: 'center'},
        {prop: 'operation', label: '操作', align: 'center', slot: true},
      ],
      tableData: [],
      showDrawer: false,
      loading: false,
      rules: {

      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted(){
    this.refresh();
  },
  methods: {
    refresh(){
      getProductInfoApi().then(res =>{
        if(res.code == 0 ){
          this.showDrawer = false;
          this.tableData = [res.data];
        }
      })
    },
    showEditDialog(row){
      this.showDrawer = true;
      this.form = row;
      console.log(this.form)
    },

    updateProductInfo(){
     updateProductInfoApi(this.form).then(res => {
        this.loading = false;
        if(res.code == 0){
          this.$message({type: 'success', message: '提交成功'})
          this.showDrawer = false;
          this.refresh();
        }
      })
    },

    beforeOpenDrawer(){
      this.loading = false;
    },
    cancel(){
      this.showDrawer = false;
    },
    confirm(){
      this.loading = true;
      this.updateProductInfo()
    }
  }

}
</script>
<style  scoped>
.form-button{
  margin-left: 30px;
  position: absolute;
  bottom: 20px;
}
</style>
